<template>

  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="800px"
    @close="dialogClose"
  >

    <div style="padding:20px">

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="120px">

        <el-form-item prop="repoId" label="所属题库">
          <repo-select v-model="postForm.repoId" :is-exam="true" style="width: 100%" @code="repoChange"/>
        </el-form-item>

        <el-form-item prop="quType" label="所属题型">
          <dic-list-select v-model="postForm.quType" dic-code="qu_type" style="width: 100%"/>
        </el-form-item>

        <el-form-item label="难易程度">
          <dic-list-select v-model="postForm.quLevel" dic-code="qu_level" style="width: 100%" />
        </el-form-item>

        <el-form-item label="所属章节">
          <chapter-select v-model="postForm.chapterId" :repo-id="postForm.repoId" style="width: 100%"/>
        </el-form-item>

        <el-form-item label="知识点">
          <key-point-select v-model="pointList" :root="pointRoot"/>
        </el-form-item>

        <el-form-item prop="num" label="抽取题数">
          <el-input-number v-model="postForm.num" :max="resultSet.quCount" size="mini"/> <span style="color: #ff3403">可用题数为：{{ resultSet.quCount }}</span>
        </el-form-item>
      </el-form>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>

  </el-dialog>

</template>

<script>

import { previewRule } from '@/api/tmpl/tmpl'
import KeyPointSelect from '@/components/KeyPointSelect/index.vue'
import ChapterSelect from '@/components/ChapterSelect/index.vue'

export default {
  name: 'RuleBuildDialog',
  components: {
    ChapterSelect,
    KeyPointSelect
  },
  props: {
    quType: String,
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 两次输入校验
    const checkNum = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error('抽题数量必须大于0！'))
      } else {
        callback()
      }
    }

    return {
      pointList: [],
      postForm: {
        quLevel: null,
        repoId: null,
        quType: null,
        pointCodes: []
      },
      resultSet: {
        quCount: 0
      },
      rules: {
        repoId: [
          { required: true, message: '必须选择题库！' }
        ],
        quType: [
          { required: true, message: '必须选择题型！' }
        ],
        num: [
          { required: true, message: '抽取数量必须大于0！' },
          { validator: checkNum, trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      pointRoot: null
    }
  },
  watch: {

    // 检测查询变化
    visible: {
      handler(val) {
        this.dialogVisible = val
      }
    },

    // 计算可用题数
    pointList: {
      handler(val) {
        const codes = []
        if (val && val.length > 0) {
          val.forEach((item) => {
            codes.push(item.pointCode)
          })
        }
        this.postForm.pointCodes = codes
      },
      deep: true
    },

    // 计算可用题数
    postForm: {
      handler() {
        this.handleStat()
      },
      deep: true
    }
  },

  created() {
    this.dialogVisible = this.visible
    this.postForm.quType = this.quType
    this.handleStat()
  },
  methods: {

    // 统计数量
    handleStat() {
      previewRule(this.postForm).then(res => {
        this.resultSet = res.data
      })
    },

    repoChange(v) {
      this.pointRoot = v.pointCode
    },

    dialogClose() {
      this.dialogVisible = false
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    handleConfirm() {
      // 表单验证
      this.$refs.postForm.validate().then((valid) => {
        if (!valid) {
          return
        }

        if (this.resultSet.quCount < this.postForm.num) {
          this.$message.error('抽题数量超过题库上限！')
          return
        }

        this.$emit('update:visible', false)
        // 加入数量
        this.$set(this.resultSet, 'num', this.postForm.num)
        this.$emit('select', this.resultSet)
      })
    }
  }
}
</script>
